<template>
  <div class="grid_cont" v-loading="loading" element-loading-text="Loading...">
    <div style="display:flex;">
      <div style="width: 3px;height: 18px;background-color: rgba(204,53,47,1);"></div>
      <div style="margin-left:10px;font-size: 16px;line-height: 16px;">详情</div>
    </div>
    <div style="width: 100%;height: 1px;background-color:rgba(245,245,245,1);margin-top:16px;margin-bottom:30px;">
    </div>
    <div class="detail_cont">
      <div>整体评价</div>
      <div class="decont_top">
        <div style="display:flex;">
          <div style="min-width: 123px;">景点质量：<span style="color:rgba(204,53,47,1);">{{ list.scenicSpotsQuality
              }}</span></div>
          <div style="min-width: 123px;">服务态度：<span style="color:rgba(204,53,47,1);">{{ list.serviceAttitude }}</span>
          </div>
        </div>
        <div style="display:flex;">
          <div style="min-width: 123px;">餐饮水平：<span style="color:rgba(204,53,47,1);">{{ list.cateringLevel }}</span>
          </div>
          <div style="min-width: 123px;">交通便利性：<span style="color:rgba(204,53,47,1);">{{ list.transportationConvenience
              }}</span></div>
        </div>
      </div>
      <div class="decont_top">
        <div style="min-width: 70px;">评价内容：</div>
        <div style="max-width:600px;line-height:30px;justify-Content: space-around;">{{ list.evaluateContent }}</div>
      </div>
      <div class="decont_top">
        <div style="min-width: 70px;">图片上传：</div>
        <div class="contpt">
          <div v-if="list.fileDOList" style="display:flex;">
            <div v-for="(item, index) in list.fileDOList" :key="index">
              <UploadImg class="ptlist" disabled v-model="item.url" :limit="1" />
            </div>
          </div>
          <el-upload v-else disabled class="avatar-uploader" style="position:relative">
            <el-icon disabled class="avatar-uploader-icon" />
            <div style="position:absolute;cursor: not-allowed;user-select: none;color: #999;">暂无图片</div>
          </el-upload>
        </div>
      </div>
      <div class="decont_top" style="margin-top:-5px;">
        <div style="min-width:70px;text-align:right;">姓名：</div>
        <div>{{ list.name }}</div>
      </div>
      <div class="decont_top">
        <div style="min-width: 70px;">联系方式：</div>
        <div>{{ list.contact }}</div>
      </div>
    </div>
  </div>
  <div class="grid_cont2">
    <el-button class="grid_btn" @click="detailsbtn">返回</el-button>
  </div>
</template>

<script lang="ts" setup>
import * as getTouristApi from '@/api/smartTourism/index'
const { push } = useRouter() // 路由
const route = useRoute()
const loading = ref(true) // 加载中
/** 返回 */
const detailsbtn = () => {
  push({
    name: 'touristEvaluation',
  })
}
const list = ref({})
const getData = () => {
  getTouristApi.getTouristdetail(route.query.id).then((res) => {
    loading.value = false
    let data = reactive(res)
    // data.fileDOList = data.fileDOList.map((item) => {
    //   item.url = `/admin-api${item.url}`
    //   return item
    // })
    if (data.fileDOList.length === 0) {
      data.fileDOList = null
    }
    list.value = data;
  }).catch(error => {
    loading.value = false
  })
}
onMounted(() => {
  getData()
})

</script>
<style scoped>
.grid_cont {
  min-height: 600px;
  background: #fff;
}

.grid_cont2 {
  width: 100%;
  background: #fff;
  height: 65px;
  justify-Content: center;
  align-items: center;
  display: flex;
  padding: 0;
  box-shadow: 0px -2px 6px 0px rgba(188, 188, 188, 0.65);
}

.grid_btn {
  width: 80px;
  height: 30px;
  background-color: #FF9900;
  border: none;
  color: #fff;
}

.detail_cont {
  padding-left: 40px;
  line-height: 30px;
}

.decont_top {
  display: flex;
  font-size: 14px;
  color: var(--el-text-color-regular);
  margin: 10px 0;
}

.ptlist {
  margin-right: 26px;
}

.contpt {
  margin-top: 8px;
  display: flex;
}

.contpt>.ptlist:last-child {
  margin-right: 0 !important;
}

.grid_btn:hover {
  opacity: 0.8;
}

::v-deep .avatar-uploader .el-upload {
  border: 1px solid var(--el-border-color);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  height: 150px;
  transition: var(--el-transition-duration-fast);
  cursor: not-allowed;
}

::v-deep .el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  text-align: center;
  cursor: not-allowed;
  background-color: var(--el-disabled-bg-color);
}

::v-deep.avatar-uploader .el-upload-list {
  display: none !important;
}

@media (min-width: 832px) and (max-width: 1000px) {
  .detail_cont {
    padding-left: 20px;
  }
}

@media (max-width: 770px) {
  .decont_top {
    display: block;
  }
}
</style>